<template>
  <Form
      ref="formRef"
      :model="formState"
      class="md:flex-row w-full flex-wrap"
      v-bind="formItemLayout"
  >
    <div class="md:flex w-full md:justify-between">
      <div class="md:flex md:justify-start">
        <Col :span="6">
        <FormItem label="应用" name="appId" style="width: 185px">
          <div class="md:w-30">
            <Select
                v-model:value="appId"
                :allowClear="true"
                :options="appOptions"
                placeholder="请选择应用"
                @change="onAppChange"
            >
            </Select>
          </div>
        </FormItem>
      </Col>
      <Col :span="6">
        <FormItem label="功能点" name="functionName" style="width: 400px">
          <div class="md:w-50">
            <Select
                v-model:value="functionName"
                :allowClear="true"
                :disabled="functionNameDisabled"
                :options="functionNameOptions"
                placeholder="请选择升级功能点"
            >
            </Select>
          </div>
        </FormItem>
      </Col>
      </div>
      <Col :span="2">
        <FormItem>
          <div class="md:flex md:justify-end">
            <Button shape="circle" type="primary" @click="onSubmit">
              <template #icon>
                <SearchOutlined/>
              </template>
            </Button>
            <Button shape="circle" style="margin-left: 5px" @click="resetForm">
              <template #icon>
                <RedoOutlined/>
              </template>
            </Button>
          </div>
        </FormItem>
      </Col>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Button, Col, Form, FormItem, Select } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { RedoOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import { getAppSelectList } from '/@/api/operation-center/common/common';
import { getFunctionNames } from '/@/api/operation-center/app-operation/function-analysis/functionAnalysis';
import { AveFuncClicksComparisonParams } from '/@/api/operation-center/app-operation/function-analysis/model/functionAnalysisModel';

const formRef = ref();

const formState = reactive<Record<string, any>>({});

const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 24},
};

const emits = defineEmits(['success']);

// Select 组件属性设置
const functionName = ref();
const functionNameOptions = ref<any[]>([]);
const functionNameDisabled = ref<boolean>(true);

const appId = ref();
const appOptions = ref<any[]>([]);

function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let appItem = res[i];
    let appOption = {
      label: appItem.name,
      value: appItem.id,
    };
    options.push(appOption);
  }
  appOptions.value = options;
}

function convertFunctionNameOptions(res: string[]) {
  let options: any[] = [];
  res.forEach((item) => {
    options.push({
      label: item, 
      value: item, 
    });
  });
  functionNameOptions.value = options;
}

const onAppChange = (data) => {
  if (data !== null && data != undefined && data.length != 0) {
    getFunctionNames({ appId: data }).then((res) => {
      functionNameDisabled.value = false;
      convertFunctionNameOptions(res);
    });
  }
};

const onSubmit = async () => {
  formRef.value.validate().then(() => {
    let aveFuncClicksComparisonParams: AveFuncClicksComparisonParams = {
      appId: appId.value,
      functionName: functionName.value, 
    };
    emits('success', aveFuncClicksComparisonParams);
  });
};

// 清空表单参数
const resetForm = () => {
  appId.value = undefined;
  functionName.value = undefined;
  functionNameDisabled.value = true;
  functionNameOptions.value = [];
};

onMounted(() => {
  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});


</script>
